@bg-color: #03a6ff;
@page1-color: #1bbc9b;
@page2-color: #4bbfc3;
@page3-color: #7baabe;
@page4-color: #ff9900;

.wrapper {
  width: 100%;
  height: 100%;

  h2 {
    font-size: 30px;
    color: #fff;
    opacity: 0.9;
    font-weight: bold;
    letter-spacing: 5px;
  }

  h4 {
    font-size: 20px;
    color: #fff;
    opacity: 0.9;
    letter-spacing: 3px;
  }

  button {
    position: absolute;
    z-index: 100;
  }

  .container {
    text-align: center;
  }

  .page1 {
    width: 100%;
    height: 100vh;
    background-color: @page1-color;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  .page2 {
    width: 100%;
    height: 100vh;
    background-color: @page2-color;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  .page3 {
    width: 100%;
    height: 100vh;
    background-color: @page3-color;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  .page4 {
    width: 100%;
    height: 100vh;
    background-color: @page4-color;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  .dots {
    > li {
      right: 20px;

      button {
        width: 10px;
        height: 10px;
        border-radius: 5px;
      }
    }

    :global {
      .slick-active {
        height: 16px !important;
        button {
          width: 10px !important;
          height: 10px !important;
          border-radius: 5px;
        }
      }
    }
  }
}
